<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" >
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>layui后台布局</title>
		<script type="text/javascript" th:src="@{/js/jquery-2.1.0.js}"></script>
		<script type="text/javascript" th:src="@{/layui/layui.js}" charset="utf-8"></script>
		<link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>

		<style type="text/css">
			#iframePage {
				width: 100%;
				height: 90%;
				border: none;
			}
			.layui-logo{
				cursor: default;
			}
		</style>
	</head>

	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header">
				<div class="layui-logo">layui 后台布局</div>
				<!-- 头部区域（可配合layui已有的水平导航） -->
				<ul class="layui-nav layui-layout-left">
					<li class="layui-nav-item">
						<a href="">控制台</a>
					</li>
					<li class="layui-nav-item">
						<a href="">商品管理</a>
					</li>
					<li class="layui-nav-item">
						<a href="">用户</a>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;">其它系统</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="">邮件管理</a>
							</dd>
							<dd>
								<a href="">消息管理</a>
							</dd>
							<dd>
								<a href="">授权管理</a>
							</dd>
						</dl>
					</li>
				</ul>
				<ul class="layui-nav layui-layout-right">
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="http://t.cn/RCzsdCq" class="layui-nav-img"> yzw
						</a>
						<dl class="layui-nav-child">
							<dd>
								<a href="">基本资料</a>
							</dd>
							<dd>
								<a href="">安全设置</a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="">注销</a>
					</li>
				</ul>
			</div>

			<div class="layui-side layui-bg-black">
				<div class="layui-side-scroll">
					<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
					<ul class="layui-nav layui-nav-tree" lay-filter="test">
						<li class="layui-nav-item layui-nav-itemed">
							<a class="" href="javascript:;">通用配置</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="javascript:;" onclick="jump1()">菜单</a>
								</dd>
								<dd data-url="user/manage" >
									<a href="javascript:;" onclick="jump()">用户</a>
								</dd>
								<dd data-url="role" >
									<a href="javascript:;" onclick="jump2()">角色</a>
								</dd>
							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;">系统权限</a>
							<dl class="layui-nav-child">
								<dd>
									<a href="javascript:;">用户</a>
								</dd>
								
							</dl>
						</li>
						<li class="layui-nav-item">
							<a href="javascript:;">云</a>
						</li>
					</ul>
				</div>
			</div>
			
			<div class="layui-body">
				<div class="layui-tab-item layui-show" style="width:100%; height:100%;">
					<iframe id="iframePage"  th:src="@{index/test}"></iframe>
				</div>
			</div>

			<div class="layui-footer">
				<!-- 底部固定区域 -->
				© layui.com - 底部固定区域
			</div>
		</div>
		<script th:inline = "javascript">
			//JavaScript代码区域
			
			layui.use('element', function() {
				var element = layui.element;
			});
			
			function jump() {
				 $("#iframePage").attr("src","user/manage");
			}
			function jump1() {
				 $("#iframePage").attr("src","index/test");
			}
			function jump2() {
				 $("#iframePage").attr("src","role");
			}
			
			 
		</script>
	</body>

</html>